<template lang="">
  <div class="login_container">
    <div class="login_box">
      <h2>在线教育网后台管理系统</h2>
      <el-form ref="form" label-width="0px">
        <el-form-item>
          <el-input v-model="form.username" prefix-icon="iconfont icon-user"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.pasword" prefix-icon="iconfont icon-lock-fill"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">登录</el-button>
        </el-form-item>
      </el-form>


    </div>
    
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      form: {
        username: "",
        password: ""
      }


    }
  }

}
</script>
<style lang="css">
.login_container {
  width: 100vw;
  /*view width:可见区域宽度*/
  height: 100vh;
  /*view height:可见区域的高度*/
  background: #2d3a4b;
}

.login_box {
  width: 500px;
  height: 300px;
  border: 1px solid #fff;
  padding:20px;

  position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);
}

.login_box h2 {
  color: white;
  text-align: center;
}

.el-button{
  width: 100%;
}
</style>